Component({
  data: {
    play: false,
    buttonTop: 0,
    buttonLeft: 30,
    windowHeight: '',
    windowWidth: ''
  },
  properties: {
    leftUrl:{
      type:String,
      default:""
    },
    topUrl:{
      type:String,
      default:""
    },
    mainName:{
      type:String,
      value:"菜单"
    },
    leftBtnName:{
      type:String,
      value:""
    },
    topBtnName:{
      type:String,
      value:""
    },
    flag:{
      type:Boolean,
      value:false
    },
    emitTopData:{

      type:Object,
      value:{}
    },
    emitLeftData:{

      type:Object,
      value:{}
    }
  },
  methods: {
    changePlay(){
      let flag = !this.data.play;
      this.setData({
        play:flag
      });
      //start title
      let titleOpenAn = wx.createAnimation({
        duration: 300,
        timingFunction: 'forwards',
        delay: 0,
        transformOrigin: '50% 50% 0'
      });
      // 这里选用opacity(0) 为了把菜单隐藏掉 
      // .step代表菜单这个所涉及的动画完成
      titleOpenAn.opacity(0).step();
      this.setData({
        titleOpenAn:titleOpenAn.export()
      });
      let titleCloseAn = wx.createAnimation({
        duration: 300,
        timingFunction: 'forwards',
        delay: 0,
        transformOrigin: '50% 50% 0'
      });
      titleCloseAn.opacity(1).step();
      this.setData({
        titleCloseAn:titleCloseAn.export()
      });
      //end title
      // start 第一条line
      let line1OpenAn = wx.createAnimation({
        duration: 300,
        timingFunction: 'forwards',
        delay: 0,
        transformOrigin: '50% 50% 0'
      });
      line1OpenAn.translateY(12).rotate(45).scale(1.4, 1).step();
      this.setData({
        line1OpenAn:line1OpenAn.export()
      });
      let line1CloseAn = wx.createAnimation({
        duration: 300,
        timingFunction: 'forwards',
        delay: 0,
        transformOrigin: '12rpx 50%'
      });
      line1CloseAn.translateY(0).rotate(0).scale(1, 1).step();
      this.setData({
        line1CloseAn:line1CloseAn.export()
      });
      //end 第一条line

      // start 第二条line
      let line2OpenAn = wx.createAnimation({
        duration: 300,
        timingFunction: 'forwards',
        delay: 0,
        transformOrigin: '100% 0'
      });
      line2OpenAn.translateY(-6.5).translateX(-1).rotate(-45).scale(1.4, 1).step();
      this.setData({
        line2OpenAn:line2OpenAn.export()
      });

      let line2CloseAn = wx.createAnimation({
        duration: 300,
        timingFunction: 'forwards',
        delay: 0,
        transformOrigin: '46rpx 50%'
      });
      line2CloseAn.translateY(0).rotate(0).scale(1, 1).step();
      this.setData({
        line2CloseAn:line2CloseAn.export()
      });
      //end 第二条line

      //start 第一个按钮
      let btn1Open = wx.createAnimation({
        duration: 300,
        timingFunction: 'forwards',
        delay: 0,
        transformOrigin: '100 0'
      });
      btn1Open.translateY(-60).opacity(1).step();
      this.setData({
        btn1Open:btn1Open.export()
      });

      let btn1Close = wx.createAnimation({
        duration: 300,
        timingFunction: 'forwards',
        delay: 0,
        transformOrigin: '46rpx 50%'
      });
      btn1Close.translateX(0).opacity(0).step();
      this.setData({
        btn1Close:btn1Close.export()
      });
      //end 第一个按钮
      //start 第二个按钮
      let btn2Open = wx.createAnimation({
        duration: 500,
        timingFunction: 'forwards',
        delay: 0,
        transformOrigin: '100% 0'
      });
      btn2Open.translateX(-60).opacity(1).step();
      this.setData({
        btn2Open:btn2Open.export()
      });

      let btn2Close = wx.createAnimation({
        duration: 500,
        timingFunction: 'forwards',
        delay: 0,
        transformOrigin: '46rpx 50%'
      });
      btn2Close.translateX(0).opacity(0).step();
      this.setData({
        btn2Close:btn2Close.export()
      });
      //end 第二个按钮
      // //start 第三个按钮
      // let btn3Open = wx.createAnimation({
      //   duration: 700,
      //   timingFunction: 'forwards',
      //   delay: 0,
      //   transformOrigin: '100% 0'
      // });
      // btn3Open.translateX(-180).opacity(1).step();
      // this.setData({
      //   btn3Open:btn3Open.export()
      // });

      // let btn3Close = wx.createAnimation({
      //   duration: 700,
      //   timingFunction: 'forwards',
      //   delay: 0,
      //   transformOrigin: '46rpx 50%'
      // });
      // btn3Close.translateX(0).opacity(0).step();
      // this.setData({
      //   btn3Close:btn3Close.export()
      // });
      //end 第三个按钮
      // //start 第四个按钮
      // let btn4Open = wx.createAnimation({
      //   duration: 700,
      //   timingFunction: 'forwards',
      //   delay: 0,
      //   transformOrigin: '100% 0'
      // });
      // btn4Open.translateX(-240).opacity(1).step();
      // this.setData({
      //   btn4Open:btn4Open.export()
      // });

      // let btn4Close = wx.createAnimation({
      //   duration: 700,
      //   timingFunction: 'forwards',
      //   delay: 0,
      //   transformOrigin: '46rpx 50%'
      // });
      // btn4Close.translateX(0).opacity(0).step();
      // this.setData({
      //   btn4Close:btn4Close.export()
      // });
      // //end 第四个按钮
    },
    leftTrigger(){
      let leftUrl=this.properties.leftUrl
      let flag=this.properties.flag
      let emitLeftData=this.properties.emitLeftData
      console.log("组件里的topData",emitLeftData)

      wx.navigateTo({
        url:leftUrl,
        success(res){
          emitLeftData!=null?
            res.eventChannel.emit('leftData',{ data: emitLeftData })
          :''
        }
      })

    },
    topTrigger(){
      let topUrl=this.properties.topUrl
      let flag=this.properties.flag
      let emitTopData=this.properties.emitTopData
      console.log("组件里的topData",emitTopData)
      wx.navigateTo({
        url:topUrl,
        success(res){
          console.log("topData",emitTopData)
          emitTopData!=null?
            res.eventChannel.emit('topData',{ data: emitTopData })
          :''
          
          
        }
      })
    }
  }

})
